<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="../angularjs/pagination.css">

    <link rel="stylesheet" href="../layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="../bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="../bootstrap/js/bootstrap.min.js"></script>

    <!--5.引入AngularJS的JS框架-->
    <script src="../angularjs/angular.min.js"></script>

    <!--6.引入AngularJS分布的JS框架-->
    <script src="../angularjs/pagination.js"></script>

    <script src="../layer/layer.js"></script>

    <script src="../angularjs/angular-route.min.js"></script>
    <script src="../angularjs/angular-animate.min.js"></script>

</head>
<body ng-app="obdeApp"  ng-init="list()"  ng-controller="obdeCtrl">

<!--最上方小导航栏-->
<div ng-include=" 'obtop.html' "></div>

<!--主要导航栏-->
<div class="navbar navbar-default " role="navigation" style="background-color: white;height: 80px;margin-bottom: 0px;padding-top: 15px">
    <!--navbar-fixed-top-->
    <div class="navbar-header" style="padding-left: 30px;">
        <a class="navbar-brand" href="#" style="padding-top: 0px;padding-left: 150px;">
            <img alt="Brand" src="../imgs/oblogo.png" width="150" height="45">
        </a>

        <a class="navbar-brand" href="#" style="padding-top: 8px">
            <img alt="Brand" src="../imgs/ipv6.png" width="50" height="30">
        </a>
    </div>

    <ul class="nav navbar-nav navbar-right" style="font-size: 15px;font-family:'黑体';padding-right: 150px">
        <li ><a href="../onlinebank.html">首页</a></li>
        <li ><a href="#!/login2">产品中心</a></li>
        <li ><a href="#!/login">安全保障</a></li>
        <li ><a href="obtransfer.html">账户转账</a></li>
        <li ><a href="obdetail.html">账户详情</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
    </ul>
</div>

<div class="container">

    <div class="panel panel-primary">

        <!--<div class="panel-heading">-->
            <!--<h1>网上银行</h1>-->

        <!--</div>-->
        <div style="text-align: center">
            <h1>用户信息</h1>

        </div>

        <div class="panel-body">
            <div class="col-md-9 col-md-offset-1">
                <form >
                    <div class="form-group">
                        <div class="form-horizontal">
                            <label for="obUname" class="control-label col-md-2">用户名</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="obUname" id="obUname" ng-model="user.obUname" class="form-control" maxlength="30"
                                       disabled    type="text"/><span id="yhm"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="obUpwd" class="control-label col-md-2">余额</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="obUpwd" id="obUpwd" ng-model="user.obBalance" class="form-control" maxlength="30"
                                       disabled     type="text"><span id="mm"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="obUpwd" class="control-label col-md-2">证件类型</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="obUpwd" id="idtype" ng-model="user.idtype" class="form-control"  maxlength="30"
                                       disabled     type="text"><span id="idtype2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="obUpwd" class="control-label col-md-2">证件</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="obUpwd" id="idcard" ng-model="user.idcard" class="form-control"  maxlength="30"
                                       disabled       disabled     type="text"><span id="idcard2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="name" class="control-label col-md-2">姓名</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="name" id="name" ng-model="user.name" class="form-control"  maxlength="30"
                                       disabled      type="text"><span id="name2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="phone" class="control-label col-md-2">手机号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="obUpwd" id="phone" ng-model="user.phone" class="form-control"  maxlength="30"
                                       disabled type="text"><span id="phone2"></span>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="yhk" class="control-label col-md-2">银行卡</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <!--<select class="form-control" ng-click="cartlist()" ng-model="form.id" ng-init="form.id='0'"   ng-options="c.obcId as c.obcAccount for c in clist">
                                    <option value="&#45;&#45;所有银行卡&#45;&#45;" selected="selected">&#45;&#45;所有银行卡&#45;&#45;</option>
                                </select>-->
                                <select class="form-control" id="yhk" ng-click="cartlist()">
                                    <option value="" selected="selected">所有银行卡</option>
                                    <option ng-repeat="c in clist" value="{{c.obcAccount}}">{{c.obcAccount}}</option>
                                </select>
                            </div>
                        </div><br>

                        <div class="form-horizontal">
                            <label for="yh" class="control-label col-md-2">银行</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="yh" id="yh" ng-model="yh" ng-click="blang()" class="form-control" disabled maxlength="30"
                                       type="text"/><span id="sjh2"></span>
                            </div>
                        </div><br>


                        <div class="form-horizontal">
                            <label for="obcBalance" class="control-label col-md-2">余额</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="obcBalance" id="obcBalance" ng-model="user.obcBalance" class="form-control"  maxlength="30"
                                       disabled type="text"><span id="obcBalance2"></span>
                            </div>
                        </div><br>

                        <div class="form-group">
                            <div class="form-group">
                                <input class="btn btn-primary col-sm-offset-2 col-md-10" id="submit"
                                       ng-click="addcard()"     value="添加银行卡" type="button">
                            </div>

                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="panel-footer text-right">
            订单新系统
        </div>

    </div>

</div>

<script>
    layerindex=-1;
    var app = angular.module('obdeApp',['pagination','ngRoute']);    //定义一个模块； cityApp

    app.controller("obdeCtrl",function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list.action
        $scope.id=0;
        $scope.yh="";
        $scope.clist="";

        $scope.user={
            obUname:"",
            obBalance:"",
            idcard:"",
            idtype:"",
            name:"",
            phone:"",
            obcBalance:""
        }
        $scope.addcard={
            obId:window.sessionStorage.getItem("obid"),
            obcAccount:"",
            obcBalance:"",
            payPwd:""
        }

        var sessionStorage = window.sessionStorage;
        var obid=window.sessionStorage.getItem("obid")
        $scope.list=function () {
            //获取账户信息
            $http.post("http://localhost:12000/onli/ob/list",obid
            ).success(function (data) {
                console.log(data.msg)
                if(data.code==200){
                    $scope.user={
                        obUname:data.data.obUname,
                        obBalance:data.data.obBalance,
                        idcard:data.data.idcard,
                        idtype:data.data.idtype,
                        name:data.data.name,
                        phone:data.data.phone
                    }
                }
            });

            //获取银行卡list
            $http.post("http://localhost:12000/onli/obc/cardlist",obid).success(function (data) {
                $scope.clist=data.data
            })
        }


        //查询银行,余额
        $("#yhk").change(function () {
            var obcAccount = $('#yhk option:selected').val();
            console.log("yhk------------"+obcAccount)

            $http.post('http://localhost:12000/tran/account',obcAccount).success(function (data) {  //正确请求成功时处理
                console.log(data);
                if(data.code==200){
                    $scope.yh=data.data;
                }else{
                    $scope.yh=data.data;
                }
            })
            //余额
            $http.post('http://localhost:12000/onli/obc/getbalance',obcAccount).success(function (data) {  //正确请求成功时处理
                //console.log(data);
                $scope.user.obcBalance=data.data.obcBalance+"元";

            })
        })

        $scope.addcart=function () {

            $http.post("http://localhost:12000/onli/obc/addcard",$scope.addcard).success(function (data) {
                layer.close(layerindex);
                layer.msg(data.msg,{icon:6,title:"系统提示："});

            })
        }
    });

    $(function () {

        $('#submit').click( function () {
            $('#myModal').modal('show')
        })
        $('#b2').click( function () {
            $('#myModal').modal('hide')
        })
    });

</script>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">请输入银行卡信息</h4>
            </div>
            <div class="modal-body">
                <!--<div style="text-align: center;color: red;"><h2>请确认进行账户转账操作吗？</h2></div>-->
                <div class="panel-body">
                    <div class="col-md-9 col-md-offset-1">
                        <div class="form-horizontal">
                            <label for="obcAccount" class="control-label col-md-2">银行卡号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="obcAccount" id="obcAccount"  ng-model="addcard.obcAccount" class="form-control" placeholder="请输入银行卡号" maxlength="30"
                                       type="text"><span id="obcAccount2"></span>
                            </div>
                        </div><br>
                        <div class="form-horizontal">
                            <label for="payPwd" class="control-label col-md-2">密码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="payPwd" id="payPwd"  ng-model="addcard.payPwd" class="form-control" placeholder="请输入密码" maxlength="30"
                                       type="password"><span id="payPwd2"></span>
                            </div>
                        </div><br>
                        <div class="form-group">
                            <div class="form-group">
                                <a class="btn btn-danger col-sm-offset-2 col-md-4" id="b1"
                                   ng-click="addcart()" value=""data-toggle="modal" data-target="#myModal" type="button" >确认</a>
                            </div>
                            <div class="form-group">
                                <a class="btn btn-warning col-sm-offset-2 col-md-4" id="b2"
                                   href="" type="button" data-dismiss="modal">取消</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>